app.directive('wbcTable', function() {
	return {
		restrict: 'E',
		// replace: true,
		// templateUrl: 'views/wbcTable.html',
		scope: {
			columns: '=',
            datasource: '=',
            paging: '='
		},
		link: function(scope, ele, attr) {

			var tableArr = ['<table class="table table-bordered table-hover table-striped">'];

			scope.$watchCollection('datasource', render);

			// console.log(scope)

			function render() {
				if (scope.datasource && scope.datasource.length) {
					tableArr = ['<table class="table table-bordered table-hover table-striped">'];
					renderHeader();
					renderBody();
					tableArr.push('</table>');
					scope.paging && renderPaging();
					ele.html(tableArr.join(''));
				}
			}

			function renderHeader() {
				tableArr.push('<tr>');
				tableArr.push('<th style="width:60px;text-align:center;"><input type="checkbox"></th>')
				$.each(scope.columns, function(i, obj) {
					var styleArr = [], width = obj.width;

					width && styleArr.push('width: ', width);

					tableArr.push('<th style="', styleArr.join(''), ';text-align:center;">', obj.name, '</th>');
				});
				tableArr.push('</tr>');
			}

			function renderBody() {
				$.each(scope.datasource, function(i, obj) {
					tableArr.push('<tr>');

					$.each(scope.columns, function(j, item) {
						if (item.column == '$index') {
							tableArr.push('<td><input id="'+obj.id+'" type="checkbox"></td>');
							tableArr.push('<td>', i+1, '</td>');
						} else if (item.column == '$action') {
							tableArr.push('<td><button class="btn btn-danger btn-xs">删除</button></td>');
						} else {
							tableArr.push('<td>', obj[item.column], '</td>');
						}
					});

					tableArr.push('</tr>');

				});
			}

			function renderPaging() {
//
//				tableArr.push(
//					'<nav>',
//						'<ul class="pagination">',
//						  '<li><a href="#">&laquo;</a></li>',
//						  '<li class="active"><a href="#">1</a></li>',
//						  '<li><a href="#">2</a></li>',
//						  '<li><a href="#">3</a></li>',
//						  '<li><a href="#">4</a></li>',
//						  '<li><a href="#">5</a></li>',
//						  '<li><a href="#">&raquo;</a></li>',
//						'</ul>',
//					'</nav>'
//				);
//
			}

		}
	}
});